<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JQuery操作DOM</title>
		<!-- JavaScript：核心语法：DOM（针对页面操作）+BOM（针对浏览器）
		     学习主体：针对页面操作比较多---DOM操作
			 JQuery操作DOM：理解：JQ框架改变页面内容效果
			 js基础就可以之间学习，了解函数使用
			 基础函数----事件源之后出现，事件源语法糖中
			 html()      作用：增加一个元素，覆盖原有html
			 val()       作用：针对input元素，实现修改文本框内容
			 text()      作用：生成文本内容
		 -->
		 <script src="js/jquery-1.11.1.js"></script>
		 <style>
			 div{
				 width: 200px;
				 height: 200px;
				 background: #000000;
			 }
		 </style>
	</head>
	<body>
		<!-- 鼠标点击按钮，然后,改变下面产生一行文本 -->
		<button>按钮</button>
		<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde hic nulla eum ad rerum corporis perferendis aliquid placeat aspernatur porro ipsa ipsum, labore magni ullam ratione similique tenetur exercitationem explicabo.</p>
		<div></div>
		<h3>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ut eos voluptas amet quo consectetur maxime dolor, hic voluptatem nostrum natus? Fugit, sit quod repellendus ipsum voluptatum deleniti assumenda. Exercitationem, nemo.</h3>
		<input type="button" value="按钮2"/>
		<input type="text" value="输入框可以直接写文本"/>
		<script>
			$('button').click(function(){
				/* JQ操作DOM--html()函数使用 */
				$('p').html("<h1>JQ操作DOM-html函数使用</h1>");
			});
			/* 练习：div:200*200 背景颜色自定，鼠标划过之后，下边内容修改：<h3>提示，修改为自定颜色 */
		   $('div').mouseenter(function(){
			   $('h3').html("<h3>修改为黄色</h3>");
		   });
		     /* 练习2：按钮  文本框     点击按钮，文本框增加一行文本 */
			 $('input[type="button"]').click(function(){
				// alert("jq选择器是否选中")
				 $('input[type="text"]').val("文本框内容修改~");
			 });
			 /* 利用JQ操作DOM（页面效果）：1.元素内容操作（3个函数）
			                            html()
										val()
										text()
										2.属性操作（4个函数）
										<p align="center">
										attr()
										removeAttr()
										<input checked>
										prop()
										removeProp()
										3.样式类名操作（4个函数）
										.demo{属性:属性值..}
										addClass()
										removeClass()
										toggleClass()
										hasClass()
										4.元素样式操作（5个函数）
										css()
										width()和height()
										outerWidth()和outerHeight()
										语法：css("css属性","css属性值"
										$("选择器").attr().addClass
										5.插入和删除修改操作（7个函数）
										append()和prepend()
										after()和before()
										remove()和empty()
										replaceWith()
										6.元素遍历操作（6个函数）
										7.JQ动画操作（7个函数）
			*/
		</script>
	</body>
</html>